@import "variables";

.avatars-box {

  //height: pxTorem(140);

  overflow-x: scroll;
  white-space: nowrap;
  padding: pxTorem(24) pxTorem(15) pxTorem(16) pxTorem(15);
  ul {
    //display: flex;
    //align-items: center;

    font-size: standard($f, f5);
    color: color($h5, c2);
  }
  li {
    display: inline-block;
    background: #fff;;

    margin-left: pxTorem(15);
    margin-right: pxTorem(15);
    text-align: center;

    seed-avatar {
      width: pxTorem(100);
      height: pxTorem(100);
      margin-right: 0;
    }
    .avatar{
      width: pxTorem(100);
      height: pxTorem(100);
      border-radius: 50%;
    }
    .active {
      box-sizing: border-box;
      padding: pxTorem(2);
      border: pxTorem(3) solid color($h5, c1);
      border-radius: 50%;
    }
    .avatar-min {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    p {
      display: block;
     margin-top: pxTorem(16);
    }
  }
}

.teacher-info {
  border-top: pxTorem(15) solid color($h5, c9);
  .basic-info {
    display: flex;
    padding: pxTorem(30);
    font-size: standard($f, f2);
    seed-avatar {
      width: pxTorem(110px);
      height: pxTorem(110px);
      border-radius: 50%;
    }
    .avatar{
      width: pxTorem(100);
      height: pxTorem(100);
      border-radius: 50%;
    }
    .teacher-name {
      flex: 1;
      max-width: 80%;
      text-align: right;
      color: color($h5, c2);
    }
  }
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: standard($f, f3);

    div {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: pxTorem(25) pxTorem(26);
      .key {
        display: inline-block;
        width: pxTorem(160);
        color: color($h5, c4);
      }
    }
  }
}

.intro {
  margin-top: pxTorem(54px);
  padding:0 pxTorem(40) pxTorem(40) pxTorem(40);
  font-size: standard($f, f3);
  .title {
    color: color($h5, c4);
  }
  .intro-content {
    text-align:justify;
    margin-top: pxTorem(26px);
    color: color($h5, c2);
    line-height: pxTorem(35);
  }
}
